<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>支付宝电脑网站支付</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
            sans-serif;
        }

        .tab-head {
            margin-left: 120px;
            margin-bottom: 10px;
        }

        .tab-content {
            clear: left;
            display: none;
        }

        h2 {
            border-bottom: solid #02aaf1 2px;
            width: 200px;
            height: 25px;
            margin: 0;
            float: left;
            text-align: center;
            font-size: 16px;
        }

        .selected {
            color: #FFFFFF;
            background-color: #02aaf1;
        }

        .show {
            clear: left;
            display: block;
        }

        .hidden {
            display: none;
        }

        .new-btn-login-sp {
            padding: 1px;
            display: inline-block;
            width: 75%;
        }

        .new-btn-login {
            background-color: #02aaf1;
            color: #FFFFFF;
            font-weight: bold;
            border: none;
            width: 100%;
            height: 30px;
            border-radius: 5px;
            font-size: 16px;
        }

        #main {
            width: 100%;
            margin: 0 auto;
            font-size: 14px;
        }

        .red-star {
            color: #f00;
            width: 10px;
            display: inline-block;
        }

        .null-star {
            color: #fff;
        }

        .content {
            margin-top: 5px;
        }

        .content dt {
            width: 100px;
            display: inline-block;
            float: left;
            margin-left: 20px;
            color: #666;
            font-size: 13px;
            margin-top: 8px;
        }

        .content dd {
            margin-left: 120px;
            margin-bottom: 5px;
        }

        .content dd input {
            width: 85%;
            height: 28px;
            border: 0;
            -webkit-border-radius: 0;
            -webkit-appearance: none;
        }

        #foot {
            margin-top: 10px;
            position: absolute;
            bottom: 15px;
            width: 100%;
        }

        .foot-ul {
            width: 100%;
        }

        .foot-ul li {
            width: 100%;
            text-align: center;
            color: #666;
        }

        .note-help {
            color: #999999;
            font-size: 12px;
            line-height: 130%;
            margin-top: 5px;
            width: 100%;
            display: block;
        }

        #btn-dd {
            margin: 20px;
            text-align: center;
        }

        .foot-ul {
            width: 100%;
        }

        .one_line {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #eeeeee;
            width: 100%;
            margin-left: 20px;
        }

        .am-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: box;
            width: 100%;
            position: relative;
            padding: 7px 0;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            background: #1D222D;
            height: 50px;
            text-align: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            box-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            box-align: center;
        }

        .am-header h1 {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            box-flex: 1;
            line-height: 18px;
            text-align: center;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
        }


        .adress-list{
            width: 100%;
        }
        .specific-adress{
            width: 100%;
            height: 180px;
            font-size: 14px;
            color: #666;
            /* background-color: #0000FF; */
            border: 2px solid #C0C4CC;
        }
        .add{
            width: 80px;
            height: 35px;
            color: white;
            background-color: #FFC0CB;
            margin-bottom: 10px;
            margin-top: 10px;

        }
        *{
            list-style: none;
            text-decoration: none;
        }

        .title_name{
            margin-right: 5px;
        }
        .specific-adress ul{
            margin-left: 50px;
            margin-top: 15px;
        }
        .adress_receive{
            margin-top: 12px;
            display: inline-block;
            width: 80px;
            height: 20px;
            text-align: right;
        }
        .adress_area{
            margin-top: 12px;
            display: inline-block;
            width: 80px;
            height: 20px;
            text-align: right;
        }
        .adress_retail{
            margin-top: 12px;
            display: inline-block;
            width: 80px;
            height: 20px;
            text-align: right;
        }
        .adress_tel{
            margin-top: 12px;
            display: inline-block;
            width: 80px;
            height: 20px;
            text-align: right;
        }



        .title{
            font-weight: 600;
            margin-left: -20px;
            font-size: 16px;


        }
        .title_province{
            text-align: left;
        }
        .adress-delete{
            font-size: 16px;
            float: right;
            margin-right: 30px;
            margin-top: -40px;

        }
        .adno{
            display: none;
            font-size: 16px;
            float: right;
            margin-right: 30px;
            margin-top: -60px;
        }


    </style>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
    <h1>支付界面</h1>
</header>
<div id="main">
    <div id="tabhead" class="tab-head">
        <h2 id="tab1" class="selected" name="tab">付 款</h2>
    </div>
    <form name=alipayment action=alipay.trade.page.pay.jsp method=post
          target="_blank">
        <div id="body1" class="show" name="divcontent">
            <dl class="content">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDout_trade_no" name="WIDout_trade_no"/>
                </dd>
                <hr class="one_line">
                <dt>订单名称 ：</dt>
                <dd>
                    <input id="WIDsubject" name="WIDsubject"/>
                </dd>
                <hr class="one_line">
                <dt>付款金额 ：</dt>
                <dd>
                    <input id="WIDtotal_amount" name="WIDtotal_amount"/>
                </dd>
<%--                <hr class="one_line">--%>
<%--                <dt>商品描述：</dt>--%>
<%--                <dd>--%>
<%--                    <input id="WIDbody" name="WIDbody"/>--%>
<%--                </dd>--%>
                <hr class="one_line">
                <dt>下单时间 ：</dt>
                <dd>
                    <input id="paytime" name="paytime"/>
                </dd>
                <dt>收货地址 ：</dt>
                <dd>
                    <div class="adress-list">

                    </div>
                    <button type="button" id="change" >选择收货地址</button>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd id="btn-dd">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="button"
                                    style="text-align: center;" @click="pay()">付 款</button>
						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
                </dd>
            </dl>
        </div>
    </form>
    <div id="foot">
        <ul class="foot-ul">
            <li>支付宝版权所有 2015-2018 ALIPAY.COM</li>
        </ul>
    </div>
</div>
</body>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="js/axios.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/jquery-3.4.1.min.js"></script>

<script>
    var userData = localStorage.getItem('userData');
    userData = JSON.parse(userData);
    let uno = userData.uno;
    let adno ;

    function start(){
        $.get("address", {op: "finds", uno:uno,arstate:1}, function (rs) {
            $(".GoodsNumber").text(rs.count);
            showAddress(rs.data);
        }, "json");

    }
    function showAddress(arr){
        let str = '';
        for (let i = 0; i < arr.length; i++) {

            var province = arr[i].address;
            if (province.indexOf("省") > 0) {
                province = province.substr(0, province.indexOf("省"));
            }
            adno=arr[i].adno;
            console.log(adno);

            str += '<div class="specific-adress"><ul><li class="title">' +
                '<span class="title_name">'+arr[i].consignee+'</span>' +
                '<span class="title_province">'+province+'</span></li><li>' +
                '<span class="adress_receive">收货人：</span>' +
                '<span class="receive_name">'+arr[i].consignee+'</span>' +
                '</li><li><span class="adress_area">所在地区：</span>' +
                '<span class="area_name">'+province+'</span></li>' +
                '<li><span class="adress_retail">地址：</span>' +
                '<span class="retail_name">'+arr[i].address+'</span></li><li>' +
                '<span class="adress_tel">手机：</span>' +
                '<span class="tel_name">'+arr[i].artel+'</span></li></ul>'+
                '<span id="adno" class="adno">'+arr[i].adno+'</span></div></div>';
        }
        $(".adress-list").html(str);

    }
    start();
<%--</script>--%>
<%--<script>--%>



    let path = window.location.hash;
    //地址必须是detail.html#3
    if (path.indexOf("#") < 0) {
        //地址不正确 跳转到主页面
        alert("请选择商品再结算");
    }
    var totalprice = decodeURIComponent(path.substr(1));//获取路径
    let app = new Vue({
        el: '#main',
        data: {
            cno: 0,//购物车
            uno: 0,//用户
            cart: [],//购物车项
            price: 0,
            selectedPaymentMethod: 'alipay',
        },
        methods: {
            // 打开支付窗口
            openPaymentWindow(url) {
                return new Promise(function (resolve, reject) {
                    const _this = this;
                    const width = 800;
                    const height = 600;
                    const left = window.innerWidth / 2 - width / 2;
                    const top = window.innerHeight / 2 - height / 2;

                    let paymentWindow = window.open(url, 'payment', 'width=${width},height=${height},left=${left},top=${top}'); // 打开支付页面的弹窗
                    paymentWindow.focus(); // 将焦点设置到支付页面的弹窗

                    // 监听支付窗口的关闭事件
                    const checkWindowClosed = setInterval(function () {
                        if (paymentWindow.closed) {
                            clearInterval(checkWindowClosed); // 停止定时器
                            resolve(); // 支付窗口关闭时调用resolve方法
                        }
                    }, 1000); // 每隔1秒检查支付窗口是否关闭

                });
            },

            // 下划线转驼峰
            toBean(str) {
                var re = /-(\w)/g;
                return str.replace(re, function ($0, $1) {
                    return $1.toUpperCase();
                });
            },
            pay() {
                let _this = this;
                //支付宝沙箱http://localhost:8888/alipay/pay?subject=测试商品&traceNo= 666&totalAmount=1000
                var out_trade_no = document.getElementById("WIDout_trade_no").value;
                axios.get("pay", {
                    params: {
                        // subject:'商品名',
                        // traceNo: 数量,
                        out_trade_no:out_trade_no,
                        totalprice: _this.price  // 传递金额参数给后端
                    }
                }).then(response => {
                    _this.openPaymentWindow(response.data).then(() => {
                        axios.get('queryTrade',{
                            params: {
                                trade_no: out_trade_no,//订单编号
                            }
                        }).then((rs) => {
                            if (rs.status == 200) {
                                let data = _this.cart;
                                // localStorage.setItem('gdno', data.gdno);//商品详情编号
                                // let gdno = parseInt(localStorage.getItem('gdno'));
                                // console.log(gdno);
                                //支付成功
                                axios.get('order?op=add',
                                    {
                                        params: {
                                            uno: _this.uno,
                                            ordertime:_this.paytime,
                                            paytime:_this.paytime,
                                            paytype: '支付宝',
                                            adno: adno,
                                            gdno:data.gdno,
                                            totalprice: _this.price,
                                            temp02:_this.temp02
                                        }
                                    }
                                ).then(rs => {
                                    if (rs.status == 200) {
                                        axios.get('orderdetail?op=add',
                                            {
                                                params: {
                                                    denum:_this.cart.number,
                                                    payprice:_this.price,
                                                }
                                            }
                                        ).then(rs => {
                                            if (rs.status == 200) {
                                                axios.get('cart?op=removeByCno&cno=' + _this.cno).then((response) => {
                                                    if (response.status == 200) {
                                                        alert('下单成功');
                                                        window.location.href = 'order.html';
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }else if(rs.status == 255) {
                                alert('支付失败');
                            }
                        })
                    });


                }).catch(error => {
                    layer.msg(error);
                });
            },

            /**
             * 统一请求处理
             */
            loading() {
                const _this = this;
                axios.get('cart?op=selectCart', {
                    params: {
                        cno: _this.cno
                    }
                }).then(response => {
                    if (response.status === 200) {
                        _this.cart = response.data;
                    }
                }).catch(error => {
                    console.error(error);
                });
            },
        },

        mounted() {
            const _this = this;
            _this.uno = localStorage.getItem("uno");
            _this.cno = localStorage.getItem("cno");
            _this.temp02 = localStorage.getItem("temp02");
            _this.price = totalprice;
            _this.paytime = localStorage.getItem("paytime");
            _this.loading();
        }
    })


</script>

<script language="javascript">


    var tabs = document.getElementsByName('tab');
    var contents = document.getElementsByName('divcontent');

    (function changeTab(tab) {
        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].onmouseover = showTab;
        }
    })();

    function showTab() {
        for (var i = 0, len = tabs.length; i < len; i++) {
            if (tabs[i] === this) {
                tabs[i].className = 'selected';
                contents[i].className = 'show';
            } else {
                tabs[i].className = '';
                contents[i].className = 'tab-content';
            }
        }
    }

    function GetDateNow() {
        var vNow = new Date();
        var year = vNow.getFullYear();
        var month = (vNow.getMonth() + 1).toString().padStart(2, '0');
        var day = vNow.getDate().toString().padStart(2, '0');
        var hours = vNow.getHours().toString().padStart(2, '0');
        var minutes = vNow.getMinutes().toString().padStart(2, '0');
        var seconds = vNow.getSeconds().toString().padStart(2, '0');
        var paytime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        document.getElementById("WIDout_trade_no").value = sNow;
        document.getElementById("WIDsubject").value = "用户购买";
        document.getElementById("WIDtotal_amount").value = totalprice;
        document.getElementById("paytime").value = paytime;
        localStorage.setItem('paytime', paytime);
        localStorage.setItem('temp02', sNow);//订单编号
    }
    GetDateNow();

</script>
</html>